<template>
  <div class="module-box live-box">
    <div class="title">
      <h3>迅雷直播</h3>
      <div class="tit-box">
        <a href="http://live.xunlei.com?referfrom=jw_pc_xl9_ggong_d_zbmk_gd" target="_blank" class="link-com live-link-com">更多
          <span class="text-arrow">&gt;</span>
        </a>
      </div>
    </div>
    <div class="module-main">
      <div class="module-list fl ">
        <ul>

          <li>
            <a href="http://live.xunlei.com/38078946?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="1" data-room-id="6614_673679842">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/2/26f22b21f367499e4bbdfdad68542479.jpg" alt="尤+✨怡宝💋">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>金牛座</i>
                <i>西安市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/38078946?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="1" data-room-id="6614_673679842">尤+✨怡宝💋</a>
              <p class="live-num">
                <i class="ico-live-num"></i>4352</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/23352197?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="2" data-room-id="6354_653560425">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/5/793865373e6ec8030c366146e1f048fc.jpg" alt="悠悠吖悠悠">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>金牛座</i>
                <i>镇江市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/23352197?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="2" data-room-id="6354_653560425">悠悠吖悠悠</a>
              <p class="live-num">
                <i class="ico-live-num"></i>4473</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/39197169?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="3" data-room-id="6155_675085310">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/0/e8d73e5defbac1c873f3f67b840b1993.jpg" alt="胡三胖胖✨🌧求破20万❤️">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>巨蟹座</i>
                <i>武汉市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/39197169?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="3" data-room-id="6155_675085310">胡三胖胖✨🌧求破20万❤️</a>
              <p class="live-num">
                <i class="ico-live-num"></i>6076</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/35582799?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="4" data-room-id="6352_670813218">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/8/8d0bdaaf0f84f7f013e916571e1b9fa2.jpg" alt="泊瀚🐱喵宝🐱每天中午12:00在播">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>双鱼座</i>
                <i>乌鲁木齐市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/35582799?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="4" data-room-id="6352_670813218">泊瀚🐱喵宝🐱每天中午12:00在播</a>
              <p class="live-num">
                <i class="ico-live-num"></i>5123</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/33249440?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="5" data-room-id="5390_668070883">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/3/51310197805dda39d5131942d1a8aff5.jpg" alt="Wxぃ 模特蜜桃 💋">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>天蝎座</i>
                <i>杭州市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/33249440?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="5" data-room-id="5390_668070883">Wxぃ 模特蜜桃 💋</a>
              <p class="live-num">
                <i class="ico-live-num"></i>4708</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/41949954?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="6" data-room-id="6529_678245006">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/6/bbce68e04e5ee3078c489b2eff9bb3c7.jpg" alt="小小美姐">
              <span class="label-live">直播中</span>
              <span class="label-key">
                <i>热舞秀</i>
                <i>水平座</i>
                <i>长春市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/41949954?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="6" data-room-id="6529_678245006">小小美姐</a>
              <p class="live-num">
                <i class="ico-live-num"></i>5511</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/34465101?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="7" data-room-id="6580_669491578">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/8/ba5fb22c93c16439d21fe1fd72b8407c.jpg" alt="Y-青呀青💕🦄很爱你们">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>青岛市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/34465101?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="7" data-room-id="6580_669491578">Y-青呀青💕🦄很爱你们</a>
              <p class="live-num">
                <i class="ico-live-num"></i>4492</p>
            </div>
          </li>

          <li>
            <a href="http://live.xunlei.com/30024858?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link pic" data-anchor-type="dxllive_recommendhost" data-position="8" data-room-id="6578_663252978">
              <img src="http://cdn.live.xunlei.com/cdn/avatar/8/d0012b46a90072d0d5d03eee8d63a956.jpg" alt="ck思凯-凌菲😅.">
              <span class="label-live">直播中</span>
              <span class="label-key">

                <i>巨蟹座</i>
                <i>吕梁市</i>
              </span>
              <span class="ico-live-play"></span>
            </a>
            <div class="live-info">
              <a href="http://live.xunlei.com/30024858?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="8" data-room-id="6578_663252978">ck思凯-凌菲😅.</a>
              <p class="live-num">
                <i class="ico-live-num"></i>6262</p>
            </div>
          </li>

        </ul>
      </div>

      <div class="jiuwo-main">
        <div class="module-li">
          <a href="http://live.xunlei.com/30047976?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="pic" data-anchor-type="dxllive_recommendhost" data-position="9" data-room-id="6606_663297166">
            <img src="http://cdn.live.xunlei.com/cdn/avatar/6/9cefc438c018f5467142769b1fdc0e8c.jpg" alt="CK思凯-嗨小洋洋🙋在这里">
            <span class="label-live">直播中</span>
            <span class="label-key">
              <i>生活娱乐</i>

              <i>达州市</i>
            </span>
            <span class="ico-live-play"></span>
          </a>
          <div class="live-info">
            <a href="http://live.xunlei.com/30047976?referfrom=jw_pc_xl9_ggong_d_zbmk_kp" target="_blank" class="anchor-link live-name" data-anchor-type="dxllive_recommendhost" data-position="9" data-room-id="6606_663297166">CK思凯-嗨小洋洋🙋在这里</a>
            <p class="live-num">
              <i class="ico-live-num"></i>5656</p>
          </div>
        </div>

        <div class="module-rank live-hot-anchor">
          <a href="http://live.xunlei.com/28875566?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link bg-pic" data-anchor-type="dxllive_recommendlist" data-position="1" data-room-id="7308_570131207">
            <img src="http://cdn.live.xunlei.com/cdn/avatar/7/d7e2b76f2ab9c3dcafeed436b861be00.jpg" alt="CK💗奋斗的佳妮">
          </a>
          <div class="rank-tit">
            <h4>热门推荐</h4>
          </div>
          <div class="module-rank-list">
            <ul>

              <li class="cho" data-index="0">
                <a href="http://live.xunlei.com/28875566?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link" data-anchor-type="dxllive_recommendlist" data-position="1" data-room-id="7308_570131207">
                  1.
                  <span class="anthor-name">CK💗奋斗的佳妮</span>
                  <span class="label-live">LIVE</span>
                  <span class="live-num">
                    <i class="ico-live-num"></i>4456</span>
                </a>
              </li>

              <li data-index="1">
                <a href="http://live.xunlei.com/37722853?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link" data-anchor-type="dxllive_recommendlist" data-position="2" data-room-id="7305_673274789">
                  2.
                  <span class="anthor-name">👑小酒酒9⃣号🈵🈷</span>
                  <span class="label-live">LIVE</span>
                  <span class="live-num">
                    <i class="ico-live-num"></i>4687</span>
                </a>
              </li>

              <li data-index="2">
                <a href="http://live.xunlei.com/39116341?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link" data-anchor-type="dxllive_recommendlist" data-position="3" data-room-id="6930_674989228">
                  3.
                  <span class="anthor-name">小吧唧</span>
                  <span class="label-live">LIVE</span>
                  <span class="live-num">
                    <i class="ico-live-num"></i>563</span>
                </a>
              </li>

              <li data-index="3">
                <a href="http://live.xunlei.com/29311571?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link" data-anchor-type="dxllive_recommendlist" data-position="4" data-room-id="8703_662272265">
                  4.
                  <span class="anthor-name">泊翰💗小铁扇儿</span>
                  <span class="label-live">LIVE</span>
                  <span class="live-num">
                    <i class="ico-live-num"></i>6515</span>
                </a>
              </li>

              <li data-index="4">
                <a href="http://live.xunlei.com/29263163?referfrom=jw_pc_xl9_ggong_d_zbmk_rmtj" target="_blank" class="anchor-link" data-anchor-type="dxllive_recommendlist" data-position="5" data-room-id="6577_662199436">
                  5.
                  <span class="anthor-name">CK-吃可爱长大的言之</span>
                  <span class="label-live">LIVE</span>
                  <span class="live-num">
                    <i class="ico-live-num"></i>5677</span>
                </a>
              </li>

            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>


    <style>
/* 酒窝模块 */

body {
  --widthList: 210px;
}

.ico-ann,
.ico-num,
.btn-gift-pre:after,
.btn-gift-next:after {
  background: url(../assets/img/jiuwo/spr-jw.png) no-repeat;
}

.module-jiuwo .module-main {
  position: relative;
}

.module-jiuwo .module-list li {
  height: 306px;
}

.jiuwo-main {
  width: var(--widthList);
  float: left;
  overflow: hidden;
}

.tit-jw-des {
  position: absolute;
  left: 150px;
  top: 0;
  z-index: 3
}

.tit-jw-des a:hover {
  color: #ff4880
}

.num-bean {
  font-size: 16px;
}

.jiuwo-online {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 9px;
  height: 27px;
  line-height: 27px;
  overflow: hidden;
}

.jiuwo-online-box {
  display: inline-block;
  color: #fff;
  position: relative;
}

.jiuwo-online-main {
  background: #ff4880;
  position: relative;
  z-index: 9;
  padding: 0 6px;
  height: 26px;
  overflow: hidden;
}

.jiuwo-online-box:before,
.jiuwo-online-box:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-width: 32px 25px;
  overflow: hidden;
  font-size: 0;
  top: 0;
  border-style: dashed solid dashed dashed;
  border-color: transparent #c41976 transparent transparent;
}

.jiuwo-online-box:before {
  left: -50px;
}

.jiuwo-online-box:after {
  right: -50px;
  transform: rotate(-180deg);
}

.jiuwo-online-num {
  display: inline-block;
  font-size: 0;
}

.jiuwo-online-num .num {
  width: 12px;
  height: 20px;
  line-height: 20px;
  border: solid 1px #ff779e;
  background: linear-gradient(#ff2160, #ff6893, #ff2160);
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
  margin: 0 1px 0 2px;
}

.jiuwo-gift,
.jiuwo-rank {
  height: 306px;
}

.jiuwo-gift {
  margin: 0 0 12px;
}

.bg-gift {
  width: 100%;
  display: block;
}

.gift-main {
  position: relative;
  height: 162px;
  color: #fff;
  overflow: hidden;
}

.gift-bar {
  width: 190px;
  height: 2px;
  position: absolute;
  bottom: 36px;
  left: 15px;
  background: rgba(255, 255, 255, .3);
}

.gift-bar-pro {
  height: 2px;
  display: block;
  background: #fff;
}

.btn-gift-get {
  width: 68px;
  height: 24px;
  line-height: 24px;
  border: solid 1px #fff;
  text-align: center;
  display: block;
  color: #fff;
  transition: border .3s;
  position: absolute;
}

.btn-gift-get.got,
.btn-gift-get.got:hover {
  cursor: default;
  border-color: rgba(0, 0, 0, 0);
}

.btn-gift-get:hover {
  border-color: #fff;
}

.gift-get {
  position: absolute;
  bottom: 5px;
  width: 100%;
  padding: 0 0 0 15px;
  box-sizing: border-box;
  height: 26px;
  line-height: 26px;
}

.gift-get .btn-gift-get {
  bottom: 0;
  right: 15px;
}

.get-box .btn-gift-get {
  height: 20px;
  line-height: 20px;
  top: 20px;
}

.btn-gift-pre,
.btn-gift-next {
  position: absolute;
  width: 14px;
  height: 40px;
  display: block;
  top: 50%;
  margin: -20px 0 0;
  background: rgba(0, 0, 0, .3);
  transition: background .3s;
  z-index: 9
}

.btn-gift-pre {
  left: 0;
}

.btn-gift-pre:hover,
.btn-gift-next:hover {
  background: rgba(0, 0, 0, 0.5);
}

.btn-gift-next {
  right: 0;
}

.btn-gift-pre:after,
.btn-gift-next:after {
  width: 14px;
  height: 12px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -7px;
  content: "";
}

.btn-gift-pre:after {
  background-position: -163px -105px;
}

.btn-gift-next:after {
  background-position: -183px -105px;
}

.fc-jw {
  color: #ff4880
}

.fc-ass {
  color: #808080
}

.rank-tab {
  height: 26px;
  line-height: 26px;
  background: rgba(255, 255, 255, .7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.rank-tab a {
  display: inline-block;
  text-align: center;
  margin: 0 0 0 10px;
}

.rank-tab .cur,
.rank-tab a:hover {
  color: #ff4880
}

.jiuwo-rank .bg-pic {
  height: 170px;
}

.rank-tit {
  z-index: 3
}

.jiuwo-rank .module-rank-list {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ff4880 25px);
  bottom: 0;
}

.jiuwo-rank .module-rank-list ul {
  height: 182px;
}

.jiuwo-rank .module-rank-list li {
  position: relative;
}

.jiuwo-rank .rank-null {
  line-height: 210px;
  text-align: center;
  color: #fff;
}

.jiuwo-rank .num {
  position: absolute;
  right: 10px;
  text-align: right;
}

.jiuwo-rank .name {
  display: inline-block;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.jiuwo-rank .ico-num {
  background-position: -20px -240px;
}

.link-rank-more {
  display: block;
  text-align: center;
  font-size: 12px;
}

.gift-list {
  overflow: hidden;
  height: 98px;
  position: relative;
  margin-top: 1px;
  border-bottom: solid 1px #e5e5e5;
  background: #fff;
}

.gift-list .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-list:after {
  content: "";
  position: absolute;
  height: 100%;
  display: block;
  border-right: solid 1px #e5e5e5;
  left: 50%;
  top: 0;
}

.gift-list li {
  width: 105px;
  height: 98px;
  float: left;
  text-align: center;
  position: relative;
  overflow: hidden;
  position: relative;
  color: #666
}

.get-box {
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(211, 0, 65, .7);
  transform: translateY(100%);
  transition: .3s;
  top: 0;
  color: #fff;
}

.get-box p {
  margin-top: 12px;
}

.get-box .btn-gift-get {
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -35px;
}

.get-box .btn-gift-get.got {
  margin-top: -13px;
}

li:hover .get-box {
  transform: translateY(0);
}


.pic-gift {
  display: block;
  margin: 5px auto 5px;
  width: 42px;
}

.gift-ann {
  position: relative;
  background: #fff;
  padding: 0 0 0 47px;
  height: 44px;
  overflow: hidden;
}

.gift-ann .gift-user {
  color: #999;
  padding: 5px 0 0;
}

.gift-ann .gift-user li {
  margin: 0 0 10px;
}

.gift-ann .gift-user-name {
  color: #000;
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
}

.ico-ann {
  width: 24px;
  height: 25px;
  background-position: 0 -260px;
  display: block;
  position: absolute;
  left: 15px;
  top: 12px;
}

.module-main .label {
  width: 44px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #30aa5e;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
}

.jw-anchor {
  position: relative;
  padding: 10px 10px 0 88px;
  height: 65px;
}

.jw-anchor .fc-ass {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jw-anchor .pic-anchor {
  position: absolute;
  width: 62px;
  height: 62px;
  border: solid 1px #ffc7d7;
  overflow: hidden;
  left: 15px;
  top: 10px;
  border-radius: 50%;
}

.pic-anchor img {
  width: 100%;
}

.name-anchor {
  font-size: 16px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-anchor:hover {
  color: #ff4880
}

.ico-num {
  width: 16px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  background-position: 0 -240px;
}

.btn-gift {
  height: 30px;
  line-height: 30px;
  color: #ff4880;
  text-align: center;
  margin: 8px 8px 0;
  display: block;
  border: solid 1px #ffc7d7;
  transition: .3s;
}

.btn-gift:hover {
  background: #ff4880;
  color: #fff;
  border-color: #ff4880
}

.module-jiuwo .pic img {
  width: auto;
  margin-left: -15px;
  height: 100%;
}

.module-rank:before {
  pointer-events: none;
}


/* 2017.03.02 */

.hz-A,
.gd-tips:before {
  background: url(../assets/img/jiuwo/spr-jw.png) no-repeat;
}

.jiuwo-v-gift {
  height: 55px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #2d353b;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.jiuwo-video .rec-video-des {
  bottom: 55px;
}

.jiuwo-video .video-bar {
  display: none;
}

.jiuwo-video .video-box {
  height: calc(100% - 52px)
}

.jiuwo-act {
  position: absolute;
  left: 10px;
  top: 5px;
}

.jiuwo-gift-list {
  width: 370px;
  height: 42px;
  background: #1f262b;
  border-radius: 2px;
  position: relative;
}

.btn-gift-arw {
  width: 25px;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

.btn-gift-arw:after,
.sel-inputed i {
  width: 20px;
  height: 20px;
  background: url(../assets/img/jiuwo/spr-jw.png) -20px 0 no-repeat;
  content: '';
  display: block;
  transition: transform .3s
}

.btn-gift-arw.cho:after,
.sel-inputed.cho i {
  transform: rotate(180deg);
}

.jiuwo-gift-list ul {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 4px 10px 0 15px;
  flex-wrap: wrap;
  position: absolute;
  bottom: 4px;
  width: calc(100% - 20px);
  background: #1f262b;
}

.jiuwo-gift-list li {
  width: 38px;
  height: 35px;
  position: relative;
  cursor: pointer;
  margin: 0 4px;
}

.jiuwo-gift-list li:hover {
  outline: solid 1px #3e4245;
}

.jiuwo-gift-list .hover {
  outline: solid 1px #f8198e !important
}

.gift-list-div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-list-div img {
  width: 30px;
}

.jiuwo-gift-list li:hover .gift-detail {
  display: block;
}

.jiuwo-gift-list li:nth-child(n+8) {
  display: none;
}

.jiuwo-gift-list .show-all li:nth-child(n+8) {
  display: block;
}

.gift-detail {
  background: rgba(255, 255, 255, .9);
  color: #000;
  position: absolute;
  border-radius: 5px;
  bottom: 50px;
  padding: 8px 10px;
  box-sizing: border-box;
  left: -40px;
  display: none;
}

.gift-detail:after {
  content: '';
  width: 0;
  height: 0;
  border-style: dashed;
  border-top-style: solid;
  border-color: transparent;
  border-top-color: rgba(255, 255, 255, .9);
  border-width: 12px 10px;
  position: absolute;
  bottom: -24px;
  left: 48px;
}

.gift-detail p {
  white-space: nowrap;
  line-height: 20px;
}

.giftName {
  font-size: 14px;
}

.giftPValue {
  color: #a7a7a7;
}

.giftTxt1 {
  color: #525252
}

.giftTxt1 em {
  color: #f8198e
}

.gdTitle {
  color: #f6f5f8;
  background: #a256b8;
  margin: 5px 8px 0 0;
  padding-right: 5px;
  white-space: nowrap;
}

.gdTitle span {
  display: inline-block;
}

.gdTitle span:first-child {
  background: #6d3d93;
  width: 88px;
  text-align: center;
  margin: 0 10px 0 0;
}

.present {
  width: var(--widthList);
  height: 42px;
  margin: 0 6px;
  position: relative;
}

.present-give {
  background: #1f262b;
  border-radius: 3px;
  height: 100%;
  width: 158px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.present-give img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin: 0 0 0 5px;
}

.sel-input {
  height: 100%;
  display: flex;
}

.sel-input input {
  width: 30px;
  height: 100%;
  background: #1f262b;
  color: #7c7d7e;
  border: 0;
  text-align: center;
}

.charge-btn {
  position: absolute;
  right: 0;
  width: 46px;
  height: 40px;
  border: solid 1px #f8198e;
  line-height: 40px;
}

.charge-btn a {
  color: #f8198e;
  text-align: center;
  display: block;
  height: 100%;
  font-size: 14px;
  transition: background .3s
}

.charge-btn a:hover {
  background: #e9027b;
  color: #fff;
}

.give_btn {
  width: 74px;
  height: 42px;
  background: #f8198e;
  line-height: 42px;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  transition: background .3s
}

.give_btn:hover {
  background: #e9027b;
}

.sel-inputed {
  width: 25px;
  height: 100%;
  cursor: pointer;
}

.sel-inputed a {
  height: 100%;
  display: flex;
  align-items: center;
}

.sel-list {
  position: absolute;
  bottom: 44px;
  background: #1f262b;
  left: 0;
  display: none;
}

.sel-list li {}

.sel-list a {
  margin: 0 8px;
  display: block;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  color: #7c7d7e
}

.sel-list a:hover {
  color: #f8198e;
}

.giftPop {
  position: absolute;
  left: 100px;
  background: #fff;
  bottom: 44px;
  background: url("../assets/img/jiuwo/giftPop.png") -999em no-repeat;
  width: 140px;
  height: 170px;
  display: none;
}

.giftPop66 {
  background-position: 0 0;
}

.giftPop88 {
  background-position: 0 -170px;
}

.giftPop365 {
  background-position: 0 -340px;
}

.giftPop520 {
  background-position: 0 -510px;
}

.giftPop1314 {
  background-position: 0 -680px;
}

.giftPop9999 {
  background-position: 0 -850px;
}

.gift-num {
  width: 20px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #f8198e;
  position: absolute;
  right: -5px;
  top: -5px;
  border-radius: 8px
}

.jiuwo-video .com-main {
  padding-top: 10px;
  padding-bottom: 10px;
}

.jiuwo-video .com-main:after {
  display: none;
}

.jiuwo-video .anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.jiuwo-video .anchor-name {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 75px 0 0;
}

.jiuwo-video .anchor-fans {
  color: rgba(0, 23, 69, .6);
}

.jiuwo-video .anchor-des {
  display: inline-block;
  margin: 0 0 0 8px;
  overflow: hidden;
  width: calc(100% - 60px)
}

.ico-fans {
  width: 20px;
  height: 20px;
  background: url(../assets/img/jiuwo/spr-jw.png) no-repeat;
  display: inline-block;
  vertical-align: -5px;
}

.btn-jw-att {
  width: 62px;
  height: 18px;
  line-height: 18px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -10px;
  border: solid 1px #f8198e;
  color: #f8198e;
  text-align: center;
}

.btn-jw-att span {
  margin: 0 3px 0 0;
  font-size: 13px;
}

.btn-jw-att:hover {
  background: #f8198e;
  color: #fff;
}

.btn-jw-att.done {
  background: #fff;
  cursor: default;
  color: #f8198e;
}

.jw-flash {
  position: absolute;
  width: 410px;
  height: 180px;
  top: 50%;
  left: 0;
  margin-top: -100px;
  z-index: 4;
  pointer-events: none;
}

.jw-rank {
  position: relative;
  color: rgba(0, 23, 69, .9);
}

.jw-rank h4 {
  height: 15px;
  line-height: 15px;
  margin: 5px auto;
  text-align: center;
  width: 72px;
  background: #fff;
  position: relative;
  z-index: 2;
  color: rgba(0, 23, 69, .6);
}

.jw-rank:before {
  content: '';
  border-top: solid 1px #e6e6e6;
  position: absolute;
  width: 100%;
  top: 7px;
}

.jw-rank ul {
  height: 85px;
  overflow: hidden;
  width: calc(100% + 40px);
  margin-left: -20px;
}

.jw-rank ul:hover {
  overflow: visible;
}

.jw-rank .num {
  color: rgba(0, 23, 69, .5);
  position: absolute;
  right: 38px;
}

.jw-rank .name {
  width: calc(100% - 90px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jw-rank li {
  display: flex;
  position: relative;
  height: 28px;
  align-items: center;
  padding: 0 20px;
  background: #fff
}

.chat-anchor {
  color: #f8198e;
}


/* 2017.04.26 */

.live-box {
  --colorLive: #1a1a1a;
  --colorLiveMain: #f741a6;
  --liveHeight: 532px;
}

.live-box img {
  width: 100%;
}

.live-box .module-list li,
.module-li,
.live-box .module-rank {
  height: 260px;
}

.live-box .module-list {
  height: var(--liveHeight);
}

.live-less .module-list {
  height: calc(var(--liveHeight)/2)
}

.live-less .module-rank {
  display: none;
}

.live-box .pic {
  text-align: center;
  color: #fff;
  height: 210px;
  position: relative;
}

.live-box .pic:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
  opacity: .6;
  pointer-events: none;
}

.live-box .pic img {
  transition: transform .4s
}

.live-box .pic:hover img {
  transform: scale(1.05);
}

.label-live {
  width: 54px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: linear-gradient(to right, #ee45a5, #ff3f50);
  border-radius: 10px;
}

.label-key {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  height: 18px;
  overflow: hidden;
  text-align: left;
  font-size: 0;
}

.label-key i {
  border: solid 1px #fff;
  line-height: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  padding: 0 8px;
  overflow: hidden;
  display: inline-block;
  font-size: 12px;
}

.live-info {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 14px;
}

.ico-live-num {
  display: inline-block;
  width: 15px;
  height: 11px;
  position: relative;
  overflow: hidden;
}

.ico-live-num:before,
.ico-live-num:after {
  border-radius: 50%;
  border: solid 1px var(--colorLive);
  content: '';
  display: block;
  margin: 0 auto;
}

.ico-live-num:before {
  width: 4px;
  height: 4px;
}

.ico-live-num:after {
  width: 8px;
  height: 8px;
}

.live-name {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-name:hover {
  color: var(--colorLiveMain)
}

.ico-live-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(to right, #ee45a5, #ff3f50);
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -27px;
  z-index: 3;
  transform: scale(0);
  opacity: 0;
  transition: .2s
}

.ico-live-play:after {
  width: 0;
  height: 0;
  border-style: dashed;
  border-color: transparent;
  border-width: 12px 18px;
  border-left-color: #fff;
  border-left-style: solid;
  content: '';
  position: absolute;
  top: 16px;
  left: 20px;
  border-radius: 3px;
}

a:hover .ico-live-play {
  transform: scale(1);
  opacity: 1
}

.live-box .jiuwo-main {
  float: right;
}

.module-li {
  background: #fff;
  position: relative;
  margin: 0 0 12px;
}

.live-box .module-rank-list {
  height: auto;
  max-height: 130px;
}

.live-box .module-rank h4 {
  font-size: 16px;
}

.module-rank .live-num {
  position: absolute;
  right: 10px;
  top: 0;
  color: #fff;
  line-height: 26px;
  font-weight: lighter;
  pointer-events: none;
}

.module-rank .live-num .ico-live-num:before,
.module-rank .live-num .ico-live-num:after {
  border-color: rgba(255, 255, 255, .8);
}

.live-box .module-rank-list a {
  display: flex;
  text-indent: 0;
  padding: 0 0 0 12px;
  align-items: center;
}

.live-box .anthor-name {
  max-width: calc(100% - 104px);
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-rank-list .label-live {
  width: 38px;
  height: 16px;
  line-height: 15px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  display: inline-block;
  position: static;
  vertical-align: 9px;
  transform: scale(0.9);
}

.live-box .module-rank-list li {
  position: relative;
  line-height: 26px;
  height: 26px;
}

.live-box .module-rank .bg-pic img {
  margin-left: -25px;
  width: auto;
  height: 100%;
}


/* common */

.fc-main {
  color: #0f97ff
}

.link-com {
  /*transition: .5s*/
}

.link-com:hover {
  color: #0f97ff
}

.bg-com,
.hv-com:hover {
  background: #1097fa !important;
  transition: .5s
}

a.bg-com:hover {
  background: #3eabff !important
}

@media only screen and (min-width: 1041px) and (max-width:1215px),
only screen and (min-height: 671px) and (max-height: 795px) {
  body {
    --widthList: 238px;
  }
  .jiuwo-main {
    width: 238px;
  }
  .gift-list li {
    width: 119px;
  }
  .module-list.list-two {
    height: 644px;
    overflow: hidden;
  }
  .module-jiuwo .pic img {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .gift-main {
    height: 172px;
  }
  .jiuwo-gift,
  .jiuwo-rank,
  .module-jiuwo .module-list li {
    height: 316px;
  }
  .jiuwo-gift-list {
    width: 322px;
  }
  .jiuwo-gift-list li:nth-child(n+7) {
    display: none;
  }
  .jiuwo-gift-list .show-all li:nth-child(n+7) {
    display: block;
  }
  .chat {
    height: 140px;
  }
  .jw-rank ul li:nth-child(n+10) {
    display: none;
  }

  .live-box .pic {
    height: 238px;
  }
  .live-box .module-list li,
  .module-li,
  .live-box .module-rank {
    height: 290px;
  }
  .live-box {
    --liveHeight: 592px
  }
}

@media only screen and (min-width: 931px) and (max-width:1040px),
only screen and (min-height: 601px) and (max-height: 670px) {
  /* 默认尺寸 */
  body {
    --widthList: 210px;
  }
  .jiuwo-main {
    width: var(--widthList);
  }
  .gift-list li {
    width: 105px;
  }
  .jiuwo-gift-list {
    width: 275px;
  }
  .jiuwo-gift-list li:nth-child(n+6) {
    display: none;
  }
  .jiuwo-gift-list .show-all li:nth-child(n+6) {
    display: block;
  }
  .jiuwo-video .com-main {
    padding-bottom: 5px;
  }
  .chat {
    height: 120px;
    margin: 10px 2px 10px 20px
  }
  .jw-rank ul {
    height: 70px;
  }
  .jw-rank li {
    height: 24px;
  }
  .chat img {
    width: 25px;
  }
  .chat>div {
    margin: 0 0 7px;
  }
  .jw-rank ul li:nth-child(n+9) {
    display: none;
  }
  .jw-rank-null {
    line-height: 70px;
    font-size: 15px;
  }

  .live-box .pic {
    height: 210px;
  }
  .live-box .module-list li,
  .module-li,
  .live-box .module-rank {
    height: 260px;
  }
  .live-box {
    --liveHeight: 532px
  }
}

@media only screen and (max-width:930px),
only screen and (max-height: 600px) {
  body {
    --widthList: 190px;
  }
  .jiuwo-main {
    width: var(--widthList);
  }
  .gift-main {
    height: 146px;
  }
  .gift-list li {
    width: 95px;
  }
  .module-list.list-two {
    height: 596px;
    overflow: hidden;
  }
  .module-jiuwo .pic {
    height: 165px;
  }
  .jw-anchor .pic-anchor {
    width: 50px;
    height: 50px;
    top: 15px;
    left: 8px;
  }
  .name-anchor {
    font-size: 14px;
  }
  .jw-anchor {
    padding-left: 70px;
  }
  .jiuwo-gift,
  .jiuwo-rank,
  .module-jiuwo .module-list li {
    height: 292px;
  }
  .tit-jw-des {
    display: none
  }
  .jiuwo-gift-list {
    width: 230px;
  }
  .jiuwo-gift-list li:nth-child(n+5) {
    display: none;
  }
  .jiuwo-gift-list .show-all li:nth-child(n+5) {
    display: block;
  }
  .chat {
    margin: 10px 2px 10px 15px;
  }
  .jw-rank {
    display: none;
  }
  .chat>div {
    margin: 0 0 5px;
  }
  .chat img {
    width: 25px;
  }
  .jiuwo-video .anchor-name {
    margin: 0 68px 0 0;
  }

  .live-box .pic {
    height: 190px;
  }
  .live-box .module-list li,
  .module-li,
  .live-box .module-rank {
    height: 240px;
  }
  .live-box {
    --liveHeight: 492px
  }
  .live-name {
    max-width: 7em;
  }
  .live-box .module-rank .bg-pic img {
    width: auto;
    height: 100%;
  }
}
</style>